<template>
	<div class="dealer-container">
		<div class="betslip">
			<strong class="strong">
				{{ formatObSettleTitle(dataList.obSettleCount) }}
			</strong>
			<div>
				<el-row class="paddingLR paddingB">
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_number') }}：
						{{ dataList.id || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.generated_id') }}：
						{{ dataList.generatedId || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.venue_name_details') }}：
						{{ dataList.venueName || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.competition_type') }}：
						{{ dataList.gameTypeName || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_amount') }}：
						<span
							:style="{ color: amountColor(dataList.betAmount) }"
							v-if="dataList.betAmount"
						>
							{{ handleCurrency(lookMsgList.memberCurrency) }}
							<span v-if="lookMsgList.memberCurrency === 'VND'">
								{{
									handleNumber(
										lookMsgList.memberCurrency,
										dataList.betAmount
									)
								}}
							</span>
							<span v-else>
								{{
									dataList.betAmount !== null
										? handleNumber(
												lookMsgList.memberCurrency,
												dataList.betAmount
										  )
										: '-'
								}}
							</span>
						</span>
						<span v-else>-</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_ip') }}：
						{{ dataList.loginIp || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.efficient_bet') }}：
						<span
							:style="{
								color: amountColor(dataList.validBetAmount)
							}"
						>
							{{ handleCurrency(lookMsgList.memberCurrency) }}
							<span v-if="lookMsgList.memberCurrency === 'VND'">
								{{
									handleNumber(
										lookMsgList.memberCurrency,
										dataList.validBetAmount
									)
								}}
							</span>
							<span v-else>
								{{
									dataList.validBetAmount !== null
										? handleNumber(
												lookMsgList.memberCurrency,
												dataList.validBetAmount
										  )
										: '-'
								}}
							</span>
						</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_device') }}：
						{{
							dataList.obDeviceType === '其他'
								? dataList.obDeviceType
								: typeFilter(
										dataList.obDeviceType,
										'loginDeviceType'
								  )
						}}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.netAmount') }}：
						<span
							:style="{ color: amountColor(dataList.netAmount) }"
						>
							{{ handleCurrency(lookMsgList.memberCurrency) }}
							<span v-if="lookMsgList.memberCurrency === 'VND'">
								{{
									handleNumber(
										lookMsgList.memberCurrency,
										dataList.netAmount
									)
								}}
							</span>
							<span v-else>
								{{
									dataList.netAmount !== null
										? handleNumber(
												lookMsgList.memberCurrency,
												dataList.netAmount
										  )
										: '-'
								}}
							</span>
						</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_time') }}：
						<span
							:style="markSettleCountRed(dataList.obSettleCount)"
						>
							{{ dataList.createAtString || '-' }}
						</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.settle_time') }}：
						<span
							:style="markSettleCountRed(dataList.obSettleCount)"
						>
							{{ dataList.netAtString || '-' }}
						</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.ob_created_at') }}：
						<span
							:style="markSettleCountRed(dataList.obSettleCount)"
						>
							{{ dataList.obCreatedAt || '-' }}
						</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_status') }}：
						{{ typeFilter(dataList.obBetStatus, 'betStatusType') }}
					</el-col>
					<el-col :span="6" v-if="!isReset">
						是否重算：
						<span
							v-if="lookMsgList.obBetStatus === 1"
							:style="markSettleCountRed(dataList.obSettleCount)"
						>
							{{ formatObSettleCount(dataList.obSettleCount) }}
						</span>
						<span v-else>-</span>
					</el-col>
				</el-row>
			</div>
			<el-table
				border
				size="mini"
				class="small-size-table"
				:data="dataList.betDetails"
				style="width: 100%"
			>
				<el-table-column
					prop="eventDetails"
					:label="`${$t('game.game_betslip.event_details')}`"
					align="center"
				>
					<template slot-scope="scope">
						{{ operandSegmentation(scope.row.eventDetails)[0] }}
						<br />
						{{ operandSegmentation(scope.row.eventDetails)[1] }}
						<br />
						{{ operandSegmentation(scope.row.eventDetails)[2] }}
					</template>
				</el-table-column>
				<el-table-column
					prop="handicapDetails"
					:label="`${$t('game.game_betslip.handicap_details')}`"
					align="center"
				>
					<template slot-scope="scope">
						{{ operandSegmentation(scope.row.handicapDetails)[0] }}
						<br />
						{{ operandSegmentation(scope.row.handicapDetails)[1] }}
						<br />
						{{ operandSegmentation(scope.row.handicapDetails)[2] }}
						<br />
						{{ operandSegmentation(scope.row.handicapDetails)[3] }}
					</template>
				</el-table-column>
				<el-table-column
					prop="betDetails"
					:label="`${$t('game.game_betslip.bet_details')}`"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.betDetails || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="netAtString"
					:label="`${$t('game.game_betslip.settle_time')}`"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.netAtString || '-' }}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import gameMixins from '../../mixins/index'

export default {
  name: 'TyDetails',
  components: {},
  mixins: [list, gameMixins],
  props: {
    dataList: {
      type: Object,
      default: () => ({})
    },
    lookMsgList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      gameTypeList: {}
    }
  },
  computed: {
    betStatusType() {
      return this.globalDics.betStatusType || []
    }
  },
  watch: {},
  created() {
    // this.getGameTypeList()
  },
  mounted() { },
  methods: {
    operandSegmentation(val) {
      if (val.indexOf('\n') !== -1) {
        return val.split('\n')
      } else {
        return []
      }
    },
    // getGameTypeList() {
    // 	this.$api.getMerchantGameGamePlant().then((res) => {
    // 		if (res && res.code === 200) {
    // 			this.gameTypeList = res.data || []
    // 		}
    // 	})
    // }
    amountColor(num) {
      if (parseFloat(num) > 0) return 'rgb(75, 121, 2)'
      if (parseFloat(num) < 0) return 'rgb(217, 0, 27)'

      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.paddingLR {
	padding: 0 30px;
}
::v-deep .betslip {
	line-height: 30px;
	padding: 30px;
	.strong {
		line-height: 70px;
	}
	.paddingB {
		padding-bottom: 30px;
	}
	th {
		color: #ffff;
		background: #000;
		border: 1px solid #000;
	}
}
</style>
